<template>
    <customNavigationBar title="管家管理" />

    <view class="orderTypeBar">
        <view class="orderType" @click="sortOptionShow = !sortOptionShow">
            <view>{{ sortList[currentSort] }}</view>
            <image src="/static/common/icon_sort.png"></image>
        </view>

        <view class="selectBox">
            <view class="mask" v-if="sortOptionShow" @click="sortOptionShow = false"></view>

            <view class="box" :class="sortOptionShow && 'show'">
                <view @click="changeSortType(index)" v-for="(item, index) in sortList" :class="index === currentSort && 'active'" :key="index">
                    {{ item }}
                </view>
            </view>
        </view>
    </view>

    <scroll-view class="content" scroll-y="true">
        <view class="item" v-for="item in GJList.records" :key="item.userId">
            <view class="top">
                <image class="avatar" :src="item.avatar" mode="aspectFit"></image>

                <view class="infomation">
                    <view class="info">
                        <text>{{ item.nickname }}</text>
                        <text>{{ item.grade === 2 ? '金牌管家' : '悦居管家' }}</text>
                        <text>客户：{{ +item.clientNum }}人</text>
                    </view>

                    <view class="phone">管家电话：{{ item.phone ? item.phone.slice(0, 3) + '****' + item.phone.slice(7) : '暂无' }}</view>

                    <view class="address">管家小区：{{ item.community }}</view>
                </view>
            </view>

            <view class="buttons">
                <navigator hover-class="none" :url="'/pages_home/butlerDetail/butlerDetail?user=' + JSON.stringify(item)">管家详情</navigator>
                <navigator v-if="item.grade === 2" hover-class="none" :url="'/pages_home/butlerTransfer/butlerTransfer?id=' + item.userId + '&comId=' + item.communityId">
                    管家转让
                </navigator>
            </view>
        </view>
    </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app';
import { homeApis } from '@/utils/apis';
const currentSort = ref(0);
const sortList = ref(['默认排序', '客户人数']);
const sortOptionShow = ref(false);
const pageParams = ref({
    current: 1,
    size: 20
});

onLoad(() => {
    getList();
});

onShow(() => {
    pageParams.value = {
        current: 1,
        size: 20
    };
    getList();
});

onReachBottom(() => {
    if (pageParams.value.current < GJList.value.pages) {
        pageParams.value.current++;
        getList();
    }
});

const GJList = ref({});
const getList = async () => {
    let res = await homeApis.getGJList({ ...pageParams.value, sortType: currentSort.value == 0 ? 1 : 3 });

    if (res.data.current == 1) {
        GJList.value = res.data;
    } else {
        if (GJList.value.current != res.data.current) {
            let records = [...GJList.value.records, ...res.data.records];
            GJList.value = { ...res.data, records };
        }
    }
};

const changeSortType = (index) => {
    currentSort.value = +index;
    sortOptionShow.value = false;
    pageParams.value = {
        current: 1,
        size: 20
    };
    getList();
};
</script>

<style>
page {
    background: #f2f4f5;
}
</style>

<style lang="scss" scoped>
.orderTypeBar {
    position: sticky;
    top: calc(var(--status-bar-height) + 88rpx);
    z-index: 5;
    height: 80rpx;
    .orderType {
        display: flex;
        align-items: center;
        gap: 16rpx;
        height: 80rpx;
        width: 100%;
        padding: 0 32rpx;
        background-color: #fff;
        z-index: 5;
        position: absolute;
        top: 0;
        left: 0;
        view {
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
        }
        image {
            width: 24rpx;
            height: 24rpx;
        }
    }

    .selectBox {
        position: fixed;
        z-index: 3;
        top: calc(var(--status-bar-height) + 88rpx + 80rpx);
        left: 0;
        width: 100%;

        .mask {
            position: absolute;
            z-index: 3;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(51, 51, 51, 0.2);
        }

        .box {
            position: absolute;
            top: 0;
            transform: translateY(-100%);
            left: 0;
            z-index: 6;
            width: 100%;
            background: #ffffff;
            border-radius: 0rpx 0rpx 24rpx 24rpx;
            transition: 0.3s;
            view {
                width: 100%;
                padding: 15rpx 32rpx;
                font-size: 28rpx;
                color: #333333;

                &.active {
                    color: #2c72ff;
                }
            }

            &.show {
                transform: translateY(0);
            }
        }
    }
}

.content {
    height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx);
    box-sizing: border-box;
    padding: 24rpx;

    .item {
        margin-bottom: 24rpx;
        width: 100%;
        background: #ffffff;
        border-radius: 16rpx;

        padding: 24rpx;

        .top {
            display: flex;
            align-items: center;
            gap: 34rpx;

            .avatar {
                width: 144rpx;
                height: 144rpx;
                background: #999999;
                border-radius: 72rpx;
            }

            .infomation {
                flex: 1;
                .info {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    text {
                        font-size: 24rpx;
                        color: #000000;
                        line-height: 34rpx;
                    }
                }
                .phone {
                    margin-top: 22rpx;
                    font-size: 24rpx;
                    color: #000000;
                    line-height: 34rpx;
                }
                .address {
                    margin-top: 20rpx;
                    font-size: 24rpx;
                    color: #000000;
                    line-height: 34rpx;
                }
            }
        }
        .buttons {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 32rpx;
            margin-top: 36rpx;

            navigator {
                width: 192rpx;
                height: 60rpx;
                border-radius: 44rpx;
                border: 2rpx solid #2c72ff;
                font-size: 28rpx;
                color: #2c72ff;
                line-height: 60rpx;
                text-align: center;

                &:last-child {
                    color: #fff;
                    background-color: #2c72ff;
                }
            }
        }
    }
}
</style>
